import ReactEcharts from "echarts-for-react";
import moment from "moment";
import React, { Component } from "react";
import axios from "axios";
import { Card, Row, Col, Statistic, DatePicker } from "antd";
const { RangePicker } = DatePicker;
import { recycleStatistics } from "./service";

// @page 商家
class sevenActivity extends Component {
	state = {
		beginDate: "",
		endDate: "",
		resultData: {},
		chartsCount: "",
	};

	async componentDidMount() {
		this.getrecycleChart();
	}

	getrecycleChart = async () => {
		let { beginDate, endDate } = this.state;
		const res = await recycleStatistics({
			beginDate,
			endDate,
		});
		this.setState({
			resultData: res.data.list,
			chartsCount: res.data.count,
		});
		console.log(res.data.count);
	};

	changeValue = (data: any) => {
		this.setState({ beginDate: data[0], endDate: data[1] });
		this.getrecycleChart();
	};

	getOption() {
		var option = {
			title: {
				text: "回收分析",
			},
			tooltip: {
				trigger: "axis",
				axisPointer: {
					type: "shadow",
				},
			},
			legend: {
				data: [
					"家电回收",
					"大件回收",
					"可再生资源回收",
					"打包回收",
					"图书捐赠",
				],
			},
			xAxis: {
				type: "category",
				data: this.state?.resultData?.date,
				boundaryGap: ["0", "1%"],
			},
			yAxis: {
				type: "value",
			},
			series: [
				{
					name: "家电回收",
					type: "bar",
					data: this.state.resultData.appliance,
				},
				{
					name: "大件回收",
					type: "bar",
					data: this.state.resultData.big,
				},
				{
					name: "可再生资源回收",
					type: "bar",
					data: this.state.resultData.common,
				},
				{
					name: "打包回收",
					type: "bar",
					data: this.state.resultData.pack,
				},
				{
					name: "图书捐赠",
					type: "bar",
					data: this.state.resultData.book,
				},
			],
		};
		return option;
	}

	render() {
		return (
			<div className="App">
				<Card style={{ marginBottom: 20 }}>
					<Row>
						<Col span={4}>
							<Statistic title="回收单总量" value={this.state.chartsCount} />
						</Col>
					</Row>
				</Card>
				<Card>
					<RangePicker
						picker="week"
						format="YYYY-MM-DD"
						disabledDate={(current: any) => {
							return current && current >= moment().endOf("day");
						}}
						onChange={(date: any, dateString: any) => {
							setTimeout(() => {
								this.changeValue(dateString);
							}, 0);
						}}
					/>
				</Card>
				<Card>
					<ReactEcharts
						style={{ height: "600" + "px" }}
						notMerge={true}
						lazyUpdate={true}
						theme={"theme_name"}
						option={this.getOption()}
					/>
				</Card>
			</div>
		);
	}
}

export default sevenActivity;
